<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>工作日志</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<style type="text/css">
			.mui_rizhi{
				background: #1d8fe1;
			}
			.mui_rizhi a{
				color: white;
			}
			.mui-title{
				color: white;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav mui_rizhi">
				 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		   		<h1 class="mui-title" style="color: white;">工作日志</h1>
				</div>
	    </header>
	   	<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	  <div class="mui-scroll">
	    	<div class="mui-content">
				<div class="mui-input-row mui-search search-box">
				    <input type="search" class="mui-input-clear" placeholder="">
				</div>
			    <ul class="mui-table-view" id="table1">
			        <li class="mui-table-view-cell mui-media">
			            <a href="javascript:;">
			                <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
			                <div class="mui-media-body">
			                    2018年08月08日
			                    <p class="mui-ellipsis">今天的工作量基本完成，原型已经完成，用例图完成......</p>
			                </div>
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media">
			            <a href="javascript:;">
			                <img class="mui-media-object mui-pull-left" src="images/timg1.jpg">
			                <div class="mui-media-body">
			                    2018年08月09日
			                    <p class="mui-ellipsis">今天的工作量基本完成，原型已经完成，用例图完成......</p>
			                </div>
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media">
			            <a href="javascript:;">
			                <img class="mui-media-object mui-pull-left" src="images/timg4.jpg">
			                <div class="mui-media-body">
			                    2018年08月10日
			                    <p class="mui-ellipsis">今天的工作量基本完成，原型已经完成，用例图完成......</p>
			                </div>
			            </a>
			        </li>
			    </ul>
			</div>
	  </div>
	</div>
	<div id="footer">
	<nav class="mui-bar mui-bar-tab mui_tianjia">
	    <a class="mui-tab-item mui-active" style="color: black;" id="mui_tianjia">
	        <span class="mui-icon mui-icon-plus"id="mui-span"></span>
	   </a>
	</nav>
	</div>
	</body>
	<script>
	mui.init({
	  pullRefresh : {
	    container:'#refreshContainer',
	    down : {
	      callback:pullfreshDown
	    },
	    up : {
	      callback :pullfreshUp 
	    }
	  }
	});
	
	function pullfreshDown(){
		setTimeout(function(){
			mui.getJSON("json/infor.json",function(data){
				for(var i = 0; i < data.inforlist.length; i++){
					var liNode = document.createElement('li');
					liNode.className = "mui-table-view-cell mui-media";
					liNode.innerHTML = "<a href='javascript:;'>"
					                   + "<img class='mui-media-object mui-pull-left' src="+ data.inforlist[i]['inforImgSrc']+">"
					                   + "<div class='mui-media-body'>"
					                   + data.inforlist[i]['inforTitle']
					                   + "<p class='mui-ellipsis'>"
					                   + data.inforlist[i]['inforContent']
					                   + "</p>"
					                   + "</div>"
					                   +"</span>"
					                   + "</a>";
					var table1 = document.getElementById('table1');
					table1.insertBefore(liNode,table1.childNodes[0]);
				}
			})
			
			
			
			mui("#refreshContainer").pullRefresh().endPulldownToRefresh();
			
		},1500);
		
	}
	function pullfreshUp(){
			setTimeout(function(){
				var liNode = document.createElement('li');
				liNode.className = "mui-table-view-cell mui-media";
				liNode.innerHTML = "<a href='javascript:;'>"
				                   + "<img class='mui-media-object mui-pull-left' src='images/timg2.jpg'>"
				                   + "<div class='mui-media-body'>"
				                   + "2018年"
				                   + "<p class='mui-ellipsis'>今天的工作量基本完成，原型已经完成，用例图完成......</p>"
				                   + "</div>"              
				                   + "</a>";
				var table1 = document.getElementById('table1');
				table1.appendChild(liNode);
				mui("#refreshContainer").pullRefresh().endPullupToRefresh();
			},1500);		
	}
	
	
	
			mui(".mui_rizhi").on('tap',"#mui_rizhi",function(){
				mui.openWindow({
					url:"yingyong.html",
					id:"yingyong.html"
				})
			})
			
			mui(".mui_tianjia").on('tap',"#mui_tianjia",function(){
				mui.openWindow({
					url:"shuxie.html",
					id:"shuxie.html"
				})
			})
</script>
</html>
